<template>
    <div class="linkman">
        <el-form
                :model="contact"
                :rules="rules"
            ref="contactRef"
            label-width="100px"
            style="overflow:hidden">
            <el-row :gutter="40" style="margin-top: 20px">
                <el-col :span="18">
            <el-form-item label="所属客户" prop="cusBelong">
                <el-input disabled v-model="cusBelong" placeholder="点击右侧图案获取客户">
                    <template slot="append">
                        <el-popover
                                placement="right"
                                width="400"

                                trigger="click">
                            <el-table :data="list"  highlight-current-row
                                      @current-change="getRowData" >
                                <el-table-column width="100" property="customerId" label="客户编号"></el-table-column>
                                <el-table-column width="100" property="customerName" label="客户名"></el-table-column>
                                <el-table-column width="200" property="workAddress" label="地址"></el-table-column>
                            </el-table>
                            <el-input placeholder="请输入客户名" v-model="searchData" style="width: 330px;margin: 10px 0 10px 0" ></el-input>
                            <el-button  type="success" @click="search"  > 搜索</el-button>
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                    :current-page="page" :page-size="limit"
                                    layout="prev, pager, next,total" :total="total">
                            </el-pagination>
                            <el-button  slot="reference" class="iconfont icon-kehu" @click="chooseCus"></el-button>
                        </el-popover>
                    </template>
                </el-input>
            </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-checkbox  v-model="mainContact"  label="设为主联系人" border></el-checkbox >
                </el-col>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="联系人姓名" prop="contactName">
                        <el-input v-model="contact.contactName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人性别" prop="contactSex">
                        <el-select v-model="contact.contactSex">
                            <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                            <el-option v-for="item in sex"  :key="item.sexId"  :label="item.sexName" :value="item.sexId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="电话号码" prop="contactTel">
                        <el-input v-model="contact.contactTel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" prop="contactPhone">
                        <el-input v-model="contact.contactPhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="联系人类型" prop="contactType">
                        <el-select v-model="contact.contactType" value-key="contactType" >
                            <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                            <el-option v-for="item in contactTypeData"  :key="item.contactType"  :label="item.contactTypeName" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系人职务" prop="contactPosition">
                        <el-input v-model="contact.position"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="40">
                <el-col :span="12">
                    <el-form-item label="邮箱地址" prop="emailAddress" >
                        <el-input v-model="contact.emailAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纪念日" >
                        <el-date-picker  v-model="contact.anniversary"  type="date" value-format="yyyy-MM-dd" ></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="家庭住址" prop="contactAddress">
                    <el-input v-model="contact.contactAddress"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="联系人标签">
                    <el-input v-model="contact.contactLable"></el-input>
                </el-form-item>
            </el-row>
            <el-form-item style="margin-top: 15px; margin-left: 220px;">
                <el-button @click="save_contact">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "add_linkman_info"
        ,data:function () {
            //表单验证
            var checkPhone = (rule, value, callback) => {
                if (value !== ''&& !(/^1[34578]\d{9}$/.test(value))) {
                    callback(new Error('请输入正确的手机号码!'));
                }
                callback();
            }
            var validateEmail = (rule, value, callback) => {
                    if (value !== '' ) {
                        var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                        if(!reg.test(value)){
                            callback(new Error('请输入有效的邮箱'));
                        }
                    }
                    callback();
            };
            var validatePhone = (rule, value, callback) => {

                    if (value !== '') {
                        var reg = /^((0\d{2,3}-\d{7,8}))$/;
                        if (!reg.test(value)) {
                            callback(new Error('正确的座机号格式为：0000-0000000'));
                        }
                    }
                    callback();

            };
            return{
                linkman_activeVisitable:false,
                limit: 5,
                total: null,
                page: 1,
                select:1,
                searchData:'',
                list: []
                ,cusVisiable:false
                ,radio:'1'
                ,mainContact:false
                ,contact:{
                    contactId:0,
                    contactType:{
                        contactType:1,
                        contactTypeName:''
                    },
                    customer:{
                        customerName:''
                    },

                },
                cusData:[],
                cusBelong:'',
                sex:[{sexId:1,sexName:'男'},{sexId:2,sexName:'女'}],
                contactTypeData:[],
                rules: {
                    contactName: [{ required: true, message: "用户名不能为空", trigger: "blur" },
                        { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" }],
                    contactTel: [
                        { required: true,  message: '请输入正确的电话号码', trigger: 'blur' },
                        {validator: validatePhone, trigger: 'change'}

                    ],
                    contactPhone:  [{ required: true, message: "请输入手机号码", trigger: "blur,change" },
                        {validator: checkPhone, trigger: 'change'}
                    ],
                    emailAddress:[ {validator: validateEmail, trigger: 'change'}],
                }
            }
        },
        methods:{

            //查询所有联系人类型
            selecAllconType(){
                this.$axios.get("api/customer/all_contact_type")
                    .then(v=>{
                        this.contactTypeData = v.data
                    }).catch()
            },
            /*保存联系人*/
            save_contact(){
                this.$refs['contactRef'].validate((valid) => {
                        if (valid) {
                            if(this.$store.state.index == 0) {//index 为0，为新增客户时新增联系人
                                /* 将联系人对象存入store中 */
                                this.$store.state.vueContact.linkman_activeVisitable = false
                                if(this.mainContact){
                                    this.contact.is_main = 1
                                }else{
                                    this.contact.is_main = 0
                                }
                                this.$store.state.vueContact.contactList.push(this.contact)
                                this.contact = {}
                            }
                            else{//否则是联系人管理中新增联系人
                                if(this.mainContact){
                                    this.contact.is_main = 1
                                }else{
                                    this.contact.is_main = 0
                                }
                                this.$axios.post("api/customer/add_contact",this.contact)
                                    .then(v=>{
                                        this.$store.state.vueLinkManManage.linkman_manVisitable = false
                                        //刷新数据
                                        this.$store.state.vueLinkManManage.get_linkman(this.curr_page,this.page_size);
                                        this.contact = {}
                                        this.$message({
                                            message: '添加成功！',
                                            type: 'success'
                                        });
                                }).catch()
                            }
                        }else{
                            this.global.mes_error("信息输入错误，请修改后重新提交！")
                            return false;
                        }

                });
            },
            /*改变所属客户的v-model*/
            changVModel(){
                if(this.$store.state.index == 0){
                    this.cusBelong = this.$store.state.vueContact.customer.customerName
                }else{
                    this.cusBelong = this.contact.customer.customerName
                }
            },
            /*选择客户*/
            chooseCus(){
                this.list = []
                this.searchData = ''
                this.$axios.get("api/customer/select_cus")
                    .then(v=>{
                        this.cusData = v.data
                            console.log("this.cusData")
                        console.log(this.cusData)
                        this.getList();
                }).catch()
            },
            //分页处理数据
            getList() {
                // es6过滤得到满足搜索条件的展示数据list

                let list = this.cusData.filter((item, index) =>
                    item.customerName.includes(this.searchData)
                )
                this.list =  list.filter((item, index) =>
                    index < this.page * this.limit && index >= this.limit * (this.page - 1)
                )
                this.total = list.length
            },
            // 分页当每页数量改变
            handleSizeChange(val) {
                this.limit = val
                this.getList()
            },
            // 分页当当前页改变
            handleCurrentChange(val) {
                this.page = val
                this.getList()
            },
            // 分页中的搜索过滤数据
            search() {
                this.page = 1
                this.getList()
            },
            //所属用户中获取客户
            getRowData(val) {
                this.contact.customer = val;
                this.cusBelong = val.customerName
            },

            //清空表单
            cleanContact(){
                window.console.log('在清空联系人')
                //从新增客户处新增联系人 不清空 '所属客户 '字段
                if(this.$store.state.index != 0) {//index 为0，为新增客户时新增联系人
                    this.contact.customer = {}
                }
                this.contact = {
                    contactId:0,
                    contactName:'',
                    contactType:{
                        contactType:1,
                        contactTypeName: ''
                    },
                    contactSex:1,
                    contactPhone:'',
                    contactTel:'',
                    position:'',
                    contactAddress:'',
                    emailAddress:'',
                    anniversary:'',
                    contactLable:'',
                }
            },
        },
        created() {
            this.selecAllconType();
            this.changVModel();
            //清空表单
            this.cleanContact();
        },
        destroyed() {
            this.$store.state.index = 1
        }

    }
</script>
<style>
.cell{
    text-align: center;
}
.el-input-group .el-date-editor{
    width: 100%!important;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
    color: #606226!important;
}
.el-form-item__content/deep/.el-select{
    width: 100%!important;}
.el-checkbox.is-bordered {
    padding: 9px 20px 9px 20px!important;}
</style>